import router from './router'
import store from './store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const whiteList = ['/login', '/404']
// 设置路由全局守卫
// to: Route: 即将要进入的目标 路由对象 路由路径

// **from: **Route: 当前导航正要离开的路由

// **next: **Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数

router.beforeEach(async (to, form, next) => {
    NProgress.start()// 开始加载进度条（进度条插件）
    const token = store.getters.token
    if (token) {
        // 判断当前是否在登录页 如果是 就直接跳转到首页

        if (to.path === '/login') {
            next('/')
            NProgress.done()// 关闭加载进度条
        } else {
            // 如果不再登录页 就正常放行
            // 在登录的时候 进行获取用户信息 登异步操作 完成之后 再去放行路由
            // 判断一下当前用户信息是不是空的 如果是再进行请求，因为每次进行路由跳转都会进入全局守卫，这个时候如果不加判断会多次请求获取用户数据

            if (!store.state.user.userInfo.userId) {
                // 根据用户权限 添加动态路由
                // router.addRoutes(asyncRoutes)
                // const otherRoutes = await
                const { roles } = await store.dispatch('user/getUserInfo')
                // await store.dispatch('user/getUserInfo')
                const otherRoutes = await store.dispatch('permisson/filterRoutes', roles.menus)
                // 根据用户权限 添加动态路由

                router.addRoutes([...otherRoutes, { path: '*', redirect: '/404', hidden: true }])
                // console.log(to)
                next({
                    ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次) ...展开运算符  展开所有数据  to 就是即将要跳转的路由界面
                    replace: true // 重进一次, 不保留重复历史
                })
                return
            }

            next()
        }
    } else {
        // 没有token的情况
        // 判断当前是否在白名单  如果在 直接放行
        if (whiteList.includes(to.path)) {
            next()
        } else {
            // 如果不在的时候 直接跳转到登录页
            next('/login')
            NProgress.done()
        }
    }
})
// 全局的后置守卫  在页面进入之后 会经过后置守卫
// 全局后置守卫一旦在全局前置守卫做了拦截 拦截到其他页面 后置守卫不会触发
router.afterEach((to, form) => {
    NProgress.done()
})
